<template>
  <div class="category">
    <!-- 头部 -->
    <div class="header">
      <category-header />
    </div>
    <!-- 产品列表 -->
    <div class="list-wrap" v-if="!isShowLoading">
      <!-- 左边 -->
    <scroll
      class="goods-left"
      ref="scroll"
      :probeType="3"
      :listenScroll="true"
      :scrollY="true"
      v-if="categoriesData.length"
    >
      <ul class="category-wrap">
        <li
          class="category-item"
          v-for="(item, index) in categoriesData"
          :key="item.id"
          ref="categoryItem"
          :class="{selected: currentIndex === index}"
          @click="handleToLeftItem(index)"
        >
          <span class="text-wrapper">{{item.name}}</span>
        </li>
      </ul>
    </scroll>
      <!-- 右边 -->
      <content-view :categoriesDetailData="categoriesDetailData"/>
    </div>
    <loading-svg v-show="isShowLoadingSvg" />
    <skeleton v-if="isShowLoading" />
  </div>
</template>

<script>
import CategoryHeader from '@/components/content/category/CategoryHeader'
import ContentView from '@/components/content/category/ContentView'
import Skeleton from '@/components/content/category/Skeleton'

import { getCategoryData, getCategoryDetailData } from '@/network/home.js'
export default {
  name: 'Category',
  data () {
    return {
      // 是否显示加载图标
      isShowLoading: true,
      // 左边列表数据
      categoriesData: [],
      // 右边列表数据
      categoriesDetailData: [],
      // 左边item选中与否
      currentIndex: 0,
      isShowLoadingSvg: false
    }
  },
  mounted () {
    // 初始化数据
   this._initData()
  },
  components: {
    CategoryHeader,
    ContentView,
    Skeleton
  },
  activated () {
    // 页面缓存了数据,所以会走这个方法
    this.$nextTick(() => {
      if (this.$route.params.currentIndex > -1) {
        this.handleToLeftItem(this.$route.params.currentIndex + 1)
      }
    })
  },
  methods: {
    // 1. 初始化操作(数据和界面)
    async _initData () {
        // 1. let [a, b] = await Promise.all([getCategoryData(), getCategoryDetailData()])
        // 2. const [a, b] = await Promise.all([getCategoryData(),getCategoryDetailData()].map(promise => promise))
        /**
        * const result1 = getCategoryData()
        * const result2 = getCategoryDetailData()
        * const a1 = await result1
        * const a2 = await result2
        */
        // 并发两个异步请求
      const [leftRes, rightRes] = await Promise.all([getCategoryData(), getCategoryDetailData('lk001')].map(async promise => await promise))
      leftRes.success && (this.categoriesData = leftRes.data.cate)
      rightRes.success && (this.categoriesDetailData = rightRes.data.cate)
      this.isShowLoading = false
    },
    // 2. 处理左边的点击
    async handleToLeftItem (index) {
      this.isShowLoadingSvg = true
      // 2.1 改变索引
      this.currentIndex = index
      // 2.2 滚动到对应的位置
      setTimeout(() => {
        let menuLists = this.$refs.categoryItem
        let el = menuLists[index]
        // 2.3 滚动到对应元素上
        this.$refs.scroll.scrollToElement(el, 300)
      }, 900)
      // 2.4 获取右边的数据
      let param = index >= 9 ? `lk0${index + 1}` : `lk00${index + 1}`
      const rightRes = await getCategoryDetailData(param)
      rightRes.success && (this.categoriesDetailData = rightRes.data.cate)
      this.isShowLoadingSvg = false
    }
  }
}

</script>
<style lang='scss' scoped>
.category {
 @include setWH(100%, 100%);
  background-color: #f5f5f5;
  overflow: hidden;
}
.list-wrap {
  display: flex;
  position: absolute;
  top: px2rem(49);
  bottom: px2rem(51);
  width: 100%;
  overflow: hidden;
}
.goods-left {
  background-color: #f4f4f4;
  width: px2rem(93);
  flex: 0 0 px2rem(93);
}
.category-item {
  padding: px2rem(13) 0;
  border-bottom: solid px2rem(0.1) #e8e9e8;
  position: relative;
  .text-wrapper {
    line-height: px2rem(21);
    border-left: solid px2rem(3) transparent;
    padding: px2rem(5) px2rem(12);
    @include setFontColor(px2rem(12), #666);
  }
  &.selected {
    background: #fff;
  }
  &.selected .text-wrapper {
    border-left-color: red;
    font-weight: bold;
    @include setFontColor(px2rem(14), #333);
  }
}


@media (min-width: 960px) {
  .list-wrap {
    border-right: px2rem(0.1) solid #e8e9e8;
    &.categoryItem {
      background: #fff;
    }
  }
}
</style>
